<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    </div>
    <el-table :data="listData" style="width: 100%" border>
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="strValue" label="素材名称" />
      <el-table-column prop="strCode" label="素材码" />
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="primary" @click="handleModifyStatus(row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-show="total>0"
      :total="total"
      :page.sync="pagenum"
      :limit.sync="limit"
      :layout="layout"
      @pagination="getList"
    />

    <el-dialog
      :title="`${title}素材类型`"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dialogForm"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item prop="strValue" label="素材类型">
          <el-input v-model="form.strValue" placeholder="请输入素材类型" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="handleConfirm()">{{ judge==='add'?'确 定':'修 改' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSysList, addTag, deleteSysParam, updateSys } from '../../api/addTag'
import Pagination from '@/components/Pagination'
export default {
  name: 'MaterialType',
  components: {
    Pagination
  },
  data() {
    var validateVal = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入素材类型'))
      // }
      // else if (!validURL(value)) {
      //   callback(new Error('请输入正确的下载地址!'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      total: 0,
      pagenum: 1,
      limit: 5,
      layout: 'total, prev, pager, next, jumper',
      title: '添加',
      judge: 'add',
      form: {
        strValue: '',
        strName: 'MateriaType',
        strDesc: '素材类型',
        iType: '4'
      },
      listData: [],
      rules: {
        strValue: [
          { required: true, validator: validateVal, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getSysList({ pagenum: this.pagenum, iType: 4 }).then(res => {
        this.listData = res.data
        this.total = res.total
      })
    },
    handleModifyStatus(row) {
      this.form.strValue = row.strValue
      this.form.id = row.id
      this.title = '修改'
      this.judge = 'modify'
      this.dialogVisible = true
    },
    handleDelete(row, index) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        deleteSysParam({ idInfo: [row.id] })
          .then(res => {
            this.$notify({
              title: '操作成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })

            this.getList()
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    cancelBtn() {
      this.dialogVisible = false
      this.form.strValue = ''
      this.judge = 'add'
      this.title = this.judge === 'add' ? '添加' : '修改'
    },
    handleConfirm() {
      this.$refs['dialogForm'].validate(valid => {
        if (valid) {
          if (this.judge === 'add') {
            delete this.form.id && this.form.id
            addTag(this.form)
              .then(res => {
                this.dialogVisible = false
                this.$refs['dialogForm'].resetFields()
                this.$message({
                  title: 'Success',
                  message: '添加成功',
                  type: 'success'
                })
                this.getList()
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            updateSys(this.form).then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getList()
            })
            this.form.strValue = ''
            this.judge = 'add'
            this.title = '添加'
            this.dialogVisible = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
